{% load static %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>员工账号激活</title>
    <link href="{% static 'bootstrap5/bootstrap.min.css' %}" rel="stylesheet" />
    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
    <style>
      html,
      body {
        height: 100%;
      }

      .form-signin {
        max-width: 330px;
        padding: 1rem;
      }

      .form-signin .form-floating:focus-within {
        z-index: 2;
      }

      .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }

      .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    </style>
  </head>

  <body class="mt-5 bg-body-tertiary">
    <main class="form-signin w-100 m-auto">
      <form method="POST">
        <h1 class="h3 mb-3 fw-normal">员工激活</h1>
        <div class="form-floating">
          <input
            name="email"
            type="email"
            class="form-control"
            id="emailInput"
            placeholder="请输入邮箱"
          />
          <label for="emailInput">邮箱</label>
        </div>
        <div class="form-floating">
          <input
            name="password"
            type="password"
            class="form-control"
            id="passwordInput"
            placeholder="请输入密码"
          />
          <label for="passwordInput">密码</label>
        </div>
        <button
          class="btn btn-primary w-100 py-2"
          type="submit"
          id="submit-btn"
        >
          激活
        </button>
      </form>
    </main>
  </body>
</html>

<script>
  $("#submit-btn").on("click", function (event) {
    event.preventDefault();
    let email = $("#emailInput").val();
    let password = $("#passwordInput").val();
    let emailRegex =
      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    if (!emailRegex.test(email)) {
      alert("请输入正确格式的邮箱！");
      return;
    }
    if (!password || password.length < 6) {
      alert("请输入最少6位的密码！");
      return;
    }
    $.post("/staff/active", { email, password }, function (result) {
        console.log(result);
      if (result.code == 200) {
        alert("激活成功！");
        window.location = "http://localhost:5173/#/";
      } else {
        alert(result.message);
      }
    });
  });
</script>
